<!--
 * hi-tag - 标签
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="page-view">
        <!-- 基础使用 -->
        <module-demo title="基础使用">
            <hi-tag text="标签"></hi-tag>
        </module-demo>

        <!-- 显示边框 -->
        <module-demo title="显示边框">
            <hi-tag text="标签" border></hi-tag>
        </module-demo>

        <!-- 主题 -->
        <module-demo title="主题">
            <view class="tags">
                <hi-tag text="主题" theme="primary"></hi-tag>
                <hi-tag text="主题" theme="success"></hi-tag>
                <hi-tag text="主题" theme="warning"></hi-tag>
                <hi-tag text="主题" theme="error"></hi-tag>
                <hi-tag text="主题" theme="info"></hi-tag>
            </view>
        </module-demo>

        <!-- 镂空 -->
        <module-demo title="镂空">
            <view class="tags">
                <hi-tag text="镂空" plain theme="primary"></hi-tag>
                <hi-tag text="镂空" plain theme="success"></hi-tag>
                <hi-tag text="镂空" plain theme="warning"></hi-tag>
                <hi-tag text="镂空" plain theme="error"></hi-tag>
                <hi-tag text="镂空" plain theme="info"></hi-tag>
            </view>
        </module-demo>

        <!-- 浅化 -->
        <module-demo title="浅化">
            <view class="tags">
                <hi-tag text="浅化" tint theme="primary"></hi-tag>
                <hi-tag text="浅化" tint theme="success"></hi-tag>
                <hi-tag text="浅化" tint theme="warning"></hi-tag>
                <hi-tag text="浅化" tint theme="error"></hi-tag>
                <hi-tag text="浅化" tint theme="info"></hi-tag>
            </view>
        </module-demo>

        <!-- 边框 + 主题 + 浅化 -->
        <module-demo title="边框 + 主题 + 浅化">
            <view class="tags">
                <hi-tag text="边框+主题+浅化" tint border theme="primary"></hi-tag>
                <hi-tag text="边框+主题+浅化" tint border theme="success"></hi-tag>
                <hi-tag text="边框+主题+浅化" tint border theme="warning"></hi-tag>
                <hi-tag text="边框+主题+浅化" tint border theme="error"></hi-tag>
                <hi-tag text="边框+主题+浅化" tint border theme="info"></hi-tag>
            </view>
        </module-demo>

        <!-- 带图标 -->
        <module-demo title="带图标">
            <hi-tag text="标签" icon="weixin" theme="primary"></hi-tag>
        </module-demo>

        <!-- 可关闭 -->
        <module-demo title="可关闭">
            <hi-tag text="标签" close @close="handleClose(1)" theme="success"></hi-tag>
            <hi-tag text="标签" close @close="handleClose" theme="warning" closeAbsolute></hi-tag>
        </module-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    /**
     * 关闭按钮点击事件
     * @param {Number} order 关闭按钮的序号
     */
    function handleClose(order) {
        uni.showToast({
            title: `点击了标签的关闭按钮`,
            icon: "none"
        });
    }
</script>

<style lang="scss" scoped>
    .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
</style>
